<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue'
import CardIntro from './components/CardIntro.vue'
import { ref } from 'vue'

const systemIntro = ref(null)
const functionIntro = ref(null)

const handleAnimation = () => {
    functionIntro.value.style.display = 'none'
    systemIntro.value.style.display = 'grid'
}

import { useRouter } from 'vue-router'
const router = useRouter()
const toLogin = () => {
    router.push('/login')
}
const toGitee = () => {
    window.open('https://gitee.com/mindwell/bank-management') // 可替换为你的项目仓库
}
</script>

<template>
  <div class="container">
    <header class="header">
      <h1 class="title">
        火域智眼——基于双模态感知的浓烟环境下人体目标实时检测系统
      </h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn"
      ></button-login>
    </header>
    <main class="content" @click="handleAnimation" @wheel="handleAnimation">
      <div class="system-intro" ref="systemIntro">
        <div class="left">
          <h1>
            基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
          </h1>
          <p style="font-size: 2.3rem; line-height: 1.5">
            “火域智眼”系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
          </p>
          <div class="btn-wrapper">
            <button-login
              @click="toLogin"
              text="立即体验"
              extraClass="btn-use btn-intro"
            ></button-login>
            <button-login
              @click="toGitee"
              text="联系我们"
              extraClass="btn-contact btn-intro"
            ></button-login>
          </div>
        </div>
        <figure class="right">
          <img
            src="../../assets/svg/金融.svg"
            alt="消防机器人插图"
            class="img"
          />
        </figure>
      </div>
      <div class="function-intro" ref="functionIntro">
        <h1>系统<span>模块</span>介绍</h1>

        <card-intro
          class="card__1"
          title="警情管理模块"
          content="负责警情收集、分配与跟踪，支持实时监控任务状态，帮助调度员快速掌握火情进展。"
          img_url="/src/assets/svg/可视化.svg"
        ></card-intro>
        <card-intro
          class="card__2"
          title="机器人控制模块"
          content="提供机器人状态监管和现场监控功能，传输实时视频与传感器数据支持决策。"
          img_url="/src/assets/svg/模型算法.svg"
        ></card-intro>
        <card-intro
          class="card__3"
          title="双模态检测模块"
          content="融合热成像与红外图像，自动检测现场人体目标，为搜救与疏散提供精准位置信息。"
          img_url="/src/assets/svg/数据池.svg"
        ></card-intro>
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/_variables';
@import '@/assets/scss/abstracts/_mixins';
@import '@/assets/scss/base/_animation';

.container {
  background-color: $color-grey-light-1;
}

.header {
  background-color: $color-white;
  height: 8rem;
  width: 100%;
  box-shadow: 0 0.5rem 0.5rem rgba($color-grey-dark-1, 0.1);

  color: $color-dark;

  position: fixed;
  top: 0;
  padding: 0 2rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    line-height: 4rem;
    font-size: 3rem;
  }

  .login-btn {
    padding: 1.5rem;
    width: 15rem;
    font-size: 1.5rem;
  }
}

.content {
  @include flexRowCenter;
  height: 100vh;
  padding: 0 4rem;
  overflow: hidden; // 确保容器不溢出

  h1 {
    span {
      color: $color-grey-dark-2;
    }
  }

  .system-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    align-items: center;
    gap: 6rem;

    display: none;

    .left {
      justify-self: end;
      width: 90%;

      display: grid;
      grid-template-rows: repeat(
        3,
        [row-start] minmax(min-content, 10rem) [row-end]
      );
      gap: 3rem;

      h1 {
        animation: toBottom 0.7s ease-in-out forwards;
        opacity: 0;
      }

      p {
        font-size: 1.5rem;
        animation: toTop 0.7s ease-in-out 0.6s forwards;
        opacity: 0;
      }

      .btn-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 2rem;

        animation: toTop 0.7s ease-in-out 0.6s forwards;
        opacity: 0;

        .btn-intro {
          padding: 1.5rem;
          width: 15rem;
          font-size: 1.5rem;
          padding-left: 3.3rem;

          position: relative;

          @include pseudoIcon('before');
          &::before {
            top: 1.1rem;
            left: 1.8rem;
          }
        }
        .btn-use {
          &::before {
            background: url('@/assets/svg/纸飞机.svg') no-repeat center / 70%;
          }
        }
        .btn-contact {
          &::before {
            background: url('@/assets/svg/gitee.svg') no-repeat center / 70%;
          }
        }
      }
    }

    .right {
      animation: toLeft 0.7s ease-in-out 1.3s forwards;
      opacity: 0;

      .img {
        width: 90%;
        object-fit: cover;
      }
    }
  }

  .function-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    grid-template-rows: repeat(2, minmax(min-content, 30rem));
    align-items: center;
    gap: 5rem;

    h1 {
      margin-left: 6rem;

      animation: toRightTop 0.7s ease-in-out forwards;
      opacity: 0;
    }
    .card__1 {
      animation: toLeft 0.7s ease-in-out 1.3s forwards;
      opacity: 0;
    }
    .card__2 {
      animation: toRight 0.7s ease-in-out 0.6s forwards;
      opacity: 0;
    }
    .card__3 {
      animation: toLeft 0.7s ease-in-out 2s forwards;
      opacity: 0;
    }
  }
}
</style>
